<%@page pageEncoding="UTF-8" isELIgnored="false" session="false"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@taglib prefix="f" uri="http://www.slim3.org/functions"%>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta charset="utf-8"/>
	
	<title>Category Editor<c:if test="${!empty categoryName && !sampleShow}"> - ${f:h(categoryName)}</c:if></title>

	<link rel="stylesheet" href="/js/lib/jquery/jquery-ui/css/smoothness/jquery-ui-1.8.9.custom.css" />
	<link rel="stylesheet" href="/css/categoryeditor.css" />

	<script src="/js/lib/jquery/jquery.js"></script>
<!-- 	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script> -->
	<script src="/js/lib/jquery/jquery.cookie.js"></script>
	<script src="/js/lib/jquery/jquery.hotkeys.js"></script>
	<script src="/js/lib/jquery/jquery-ui/js/jquery-ui-1.8.14.custom.min.js"></script>
	<script src="/js/lib/zeroclipboard/ZeroClipboard.js"></script>
	
	<script src="/js/lib/jquery/jstree/jquery.jstree-categoryeditor.js"></script>
	<script src="/js/categoryeditor.js"></script>
	<script>
	$(function(){
			var categoryManager = categoryEditor.categoryManager(
					{
						userid:  "${userid}",
						categoryid: "${categoryid}",
						categoryName : "${categoryName}",
						accessible: ${accessible},
						edditable: ${edditable}
					},
					sidebarManager
				);
			categoryManager.createContent();
						
			$.each([500, 1000, 1500, 2000], function(){
				setTimeout(categoryManager.resizeArea, this);
			});
						
		 var message = "${f:h(message)}";
		 var errormessage = "${f:h(errormessage)}";
		<c:if test="${empty categoryid}">
			message = "カテゴリを選択してください。";
		</c:if>
			if(message !== ""){
				categoryEditor.showMessage(message);
			}else if(errormessage !== ""){
				categoryEditor.showMessage("JSONファイルのインポートに失敗しました。フォーマットが正しくありません。", { color : "red"});
			}
			if((window.ActiveXObject || window.document.all) && !window.opera){
				alert("該当のブラウザはサポートしていません。");
			}
	});
	</script>


</head>
<body>
	<div id="clipboard_area" style="display: none;"></div>
	<div id="glayLayer" class="layer"></div>
	
	
	<div id="tophead">
		<div id="login_user">
		<c:if test="${login}">
			${loginUserId}
		</c:if>
		<c:if test="${!login}">
			Guest
		</c:if>
		</div>
  		<div id="navi">
	  		<ul>
	  		<c:if test="${login && !edditable}">
	  			<li><a class="navilink" href="/users/${userid}">マイページへ</a></li>
	  		</c:if>
	  		<c:if test="${login}">
	  			<li><a class="navilink" href="/logout">ログアウト</a></li>
	  		</c:if>
	  		<c:if test="${!login}">
	  			<li><a class="navilink" href="/login"　>ログイン</a></li>
	  		</c:if>
	  		
	  			<%--<li><span>▼Setting</span></li> --%>
<%-- 	  			<li><span class="navilink">▼ヘルプ</span></li> --%>
	  		</ul>
  		</div>	
	</div>
  	<div id="head">
  		<img alt="icon" style="float:left; margin: 5px;" height="30px;" src="/images/icon.png" />
		<img alt="Category Editor" src="/images/logo.png" />
<!-- 		<span style="position:absolute; left :310px; top : 35px;">β</span> -->
  	</div>

<c:if test="${sampleShow && !login}">
  	<div id="description" class="corner_rounded_low">
  		<p>Category Editorはツリー構造のカテゴリデータを編集するためのツールです。<br/>
				データやアイデアを整理する場合に効果を発揮します。<br/>
  		Googleアカウントでログインすることでマイデータを編集、保存することができます。</p>
  	</div>
</c:if>
  	
	<div id="underhead">
		<span id="owner_name" class="corner_rounded_medium2">
		<c:if test="${sampleShow}">
			サンプルカテゴリ
		</c:if>
		<c:if test="${!sampleShow}">
			${userid}のカテゴリ
		</c:if>
		</span>
		
		<div id="message" class="corner_rounded_medium2" style="display: none;">
		 　　<div id="message_close">×</div>
			<span id="message_str"></span>
		 </div>
		
	</div>

    <div id="container">
        <div id="wrapper">
        
            <div id="pole"></div>
            
            <div id="sidebar">
            	<div class="loading">Loading...</div>
            </div>



			<div id="content" >
			<c:if test="${!empty categoryid}">
				<div id="tree_wrapper" class="corner_rounded_medium2">
					<div id="tree_header">
						<div id="category_title" title="${f:h(categoryName)}">
							${f:h(categoryName)}
						</div>

						<div id="category_menu">
						<c:if test="${edditable}">
							<span id="label_accessible_yes" class="corner_rounded_medium label_mode"${accessible ?  "" : "style='display: none;'"  }
								title="現在、他ユーザに公開されています。">公開中</span>
							<span id="label_accessible_no" class="corner_rounded_medium label_mode"${accessible ? "style='display: none;'" : "" } 
								title="現在、他ユーザには非公開です。">非公開</span>
							<span  id="menu_switch_category_edit" class="category_menu_link" style="position: relative; left :10px;">▼編集</span>
							
							<span  id="menu_switch_category_data" class="category_menu_link">▼データ</span>
							
							
						</c:if>
						
						<c:if test="${!edditable}">
							<span id="label_reference_mode" class="label_mode corner_rounded_medium">参照モード</span>
						</c:if>
						<div class="button_small" id="copy_to_clipboard" style="visibility: hidden; margin-left: 10px; position:relative;">クリップボードにコピー</div>
						
						</div>
						

						<!-- カテゴリ編集メニュー -->
				  		<div id="menu_edit_category" style="display: none;" class="category_menu context_menu corner_rounded_medium">
							<ul>
								<li><span id="category_rename" class="context_menu_option">カテゴリ名の変更</span></li>
								<li><span id="category_delete" class="context_menu_option">カテゴリの削除</span></li>
								<li><span id="publish_config" class="context_menu_option">公開設定</span></li>
								<li><span id="save_current_state" class="context_menu_option">現在のツリー状態を保存</span></li>
							</ul>
						</div>

				  		<div id="menu_edit_data" style="display:none;" class="category_menu context_menu corner_rounded_medium">
							<ul>
								<li><span id="export_json" class="context_menu_option">エクスポート(JSON)</span></li>
								<li><span id="import_json" class="context_menu_option">インポート(JSON)</span></li>
							</ul>
						</div>
					</div>
					<hr style="width: 100%;border: dotted 1px rgb(20, 60, 110);margin:0;" />
					<div id="tree"></div>
				</div>
			</c:if>
			</div>

		</div>
		
	<!-- カテゴリフォルダ名変更ダイアログ -->
	<div id="categoryFolderRenameLayer" class="layer dialog_layer corner_rounded_high" style="display: none;">
		<p>
		<input type="text" id="categoryFolderRenameText" class="name_text corner_rounded_medium" maxlength="20"/>
		</p>
		<div class="button_wrapper" style="width: 139px;">
			<div class="processing" style="" title="Processing...">&nbsp;</div>		
			<div class="button" id="btnRenameCategoryFolder" tabindex="0" style="float: right;">名前変更</div>
		</div>
	</div>
		<!-- カテゴリフォルダ登録ダイアログ -->
	<div id="categoryFolderAddLayer" class="layer dialog_layer corner_rounded_high" style="display: none;">
		<input type="text" id="categoryFolderAddText" class="name_text" maxlength="20"/>
		
		<div class="button_wrapper" style="width: 170px;">
			<div class="processing" style="visibility: hidden;" title="Processing..."></div>		
			<div class="button" id="btnAddCategoryFolder" tabindex="0" style="float: right;">フォルダ追加</div>
		</div>
	</div>
	
	
	<div id="categoryFolderDeleteLayer" class="layer dialog_layer corner_rounded_high" style="display: none;">
		<p>配下のカテゴリも同時に削除されます。</p>
		<p>削除してもよろしいですか？</p>
		
		<div class="button_wrapper" style="width: 250px;">
			<div class="processing" style="visibility: hidden;" title="Processing..."></div>		
			<div class="button" id="btnDeleteCategoryFolder" tabindex="0">削除</div>
			<div class="button" id="btnCancelDeleteCategoryFolder" tabindex="0">キャンセル</div>
		</div>
	</div>
	
		<!-- カテゴリ登録ダイアログ -->
	<div id="categoryAddLayer" class="layer dialog_layer corner_rounded_high" style="display: none;">
		<p id="categoryAddErrorMsg" class="error_msg" style="height: 15px;"></p>
		<dl>
			<dt>カテゴリID</dt>
			<dd><input type="text" id="categoryIdText" class="name_text" maxlength="20"/></dd>
		</dl>
		<dl>
			<dt>カテゴリ名</dt>
			<dd><input type="text" id="categoryNameText" class="name_text" maxlength="20"/></dd>
		</dl>
		<div class="button_wrapper" style="width: 170px;">
			<div class="processing" style="visibility: hidden;" title="Processing..."></div>	
			<div class="button" id="btnAddCategory" tabindex="0" style="float: right;">カテゴリ追加</div>
		</div>
		
	</div>
	
	<!-- カテゴリ編集ダイアログ -->
	<div id="categoryRenameLayer" class="layer dialog_layer corner_rounded_high" style="display:none;">
		<input type="text" id="renameCategoryText" class="name_text2 corner_rounded_medium" maxlength="20	"/>
		
		<div class="button_wrapper" style="width: 112px;">
			<div class="processing" style="visibility: hidden" title="Processing..."></div>	
			<div class="button" id="btnRenameCategory" tabindex="0" style="float: right;">変更</div>
		</div>

	</div>
	
	<div id="categoryDeleteLayer" class="layer dialog_layer corner_rounded_high" style="display:none;">
		<p>このカテゴリを削除してもよろしいですか？</p>
		<p>※削除したデータは復元できません</p>
		
		<div class="button_wrapper" style="width: 250px;">
			<div class="processing" style="visibility: hidden;" title="Processing..."></div>		
			<div class="button" id="btnDeleteCategory" tabindex="0">削除</div>
			<div class="button" id="btnCancelDeleteCategory" tabindex="0">キャンセル</div>
		</div>
	</div>
	
	<div id="publish_config_layer" class="layer dialog_layer corner_rounded_high" style="display:none;">
		<p>カテゴリを公開すると他のユーザが閲覧可能になります</p>
		<div class="area_open_or_close">
			<label class="category_open">
				<input type="radio"  name="accessible" value="true" />
				公開
			</label>
			<label class="category_close">
				<input type="radio" name="accessible" value="false" />
				非公開
			</label>
		</div>
		
		<div class="button_wrapper" style="width: 170px;">
			<div class="processing" style="visibility: hidden" title="Processing..."></div>
			<div class="button" id="btn_publish_config" tabindex="0" style="float: right;">公開設定更新</div>
		</div>
	</div>

	<div id="json_upload_layer" class="layer dialog_layer corner_rounded_high" style="display: none;">
		<form action="/jsonUpload" id="jsonUploadForm" method="post" enctype="multipart/form-data">	
			<input type="hidden" name="userid" value="${userid}">
			<input type="hidden" name="categoryid" value="${categoryid}">
			<p>インポートを行うと現在のツリーデータは上書きされます。</p>
			<p>アップロード可能なファイルはJSONファイルのみです。</p>
			
			<div id="jsonfile_wrapper">
				<input type="file" name="jsonData" id="jsonfile" >
			</div>
			<input type="submit" id="btnJsonUpload" value="アップロード" class="button" >
		</form>
	</div>
	
	<script>
	var sidebarManager = categoryEditor.sidebarManager(
			{
				userid:  "${userid}",
				categoryid: "${categoryid}",
				edditable: ${edditable}
			}
		);
	sidebarManager.createContents(true);
	</script>		

		<div id="foot">
			<address>©<a href="http://categoryeditor.appspot.com">Category Editor</a> produced by <a href="http://d.hatena.ne.jp/t_gaisho/">t_gaisho</a>.&nbsp;&nbsp;powered by <a href="http://code.google.com/intl/ja/appengine/">Google App Engine</a>
			  &nbsp;&nbsp;[Version: 2011-08-28]</address>
		</div>
	</div>
	

	
</body>
</html>